<template>
  <div class="comment-reply">
    <!-- 头部信息 -->
    <van-nav-bar
      :title="comment.reply_count + '条评论'"
      class="navBar"
      @click="$emit('close')"
    >
      <van-icon slot="left" name="cross" color="blue" />
    </van-nav-bar>
    <!-- /头部信息 -->

    <div class="boxs">
      <!-- 当前评论 -->
      <CommentItem :comment="comment"></CommentItem>
      <!-- /当前评论 -->

      <!-- 所有评论回复 -->
      <CommentList
        :source="comment.com_id"
        type="c"
        :list="commentList"
        ref="scrollT"
      ></CommentList>
      <!-- /所有评论回复 -->
    </div>

    <!-- 发表评论 -->
    <div class="article-bottom">
      <van-button
        class="comment-btn"
        type="default"
        round
        size="small"
        @click="isPostShow = true"
        >写评论</van-button
      >
    </div>
    <!-- /发表评论 -->

    <!-- 弹窗 -->
    <!-- 发表评论 -->
    <van-popup v-model="isPostShow" position="bottom" round @opened="getScrollT">
      <PostComment
        v-if="isPostShow"
        :target="comment.com_id"
        :art_id="art_id"
        @post-scucces="onPostSuccess"
        @close="isPostShow = false"
      ></PostComment>
    </van-popup>
    <!-- 弹窗 -->
  </div>
</template>

<script>
import PostComment from './post-comment'
// 引入组件
import CommentItem from './comment-item'
import CommentList from './comment-list'

export default {
  // 注册组件
  components: { PostComment, CommentList, CommentItem },
  // 组件名
  name: 'commentReply',
  // 定义props
  props: {
    // 查看回复的评论
    comment: {
      type: Object,
      required: true
    },
    // 如果是发布评论回复，则也需要传递文章 ID
    art_id: {
      type: [String, Number, Object],
      default: null // 没传 默认为 null
    }
  },
  // 定义变量
  data () {
    return {
      isPostShow: false, // 控制发表评论弹出层的状态
      commentList: [] // 评论的回复列表
    }
  },
  // 生命周期函数
  created () {},
  // 定义方法函数
  methods: {
    // 回复评论
    onPostSuccess (comment) {
      // console.log(components)

      // 把发布成功的评论数据对象放到评论列表顶部
      this.commentList.unshift(comment)
      // 更新评论的数量
      this.comment.reply_count++

      // 关闭发布评论弹出层
      this.isPostShow = false
    },
    getScrollT () {
      // 打开弹窗，获取焦点，立刻滚动到第一条评论
      document.querySelector('.boxs').scrollIntoView({
        behavior: 'smooth'
      })
    }
  },
  // 定义计算属性
  computed: {},
  // 定义侦听
  watch: {}
}
</script>
<style lang="less">
.comment-reply {
  // 导航
  .navBar {
    background-color: #fff;
    .van-nav-bar__title {
      color: #000;
    }
  }
  // 底部区域
  .article-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: #fff;
    border-top: 1px solid #d8d8d8;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // 按钮
    .comment-btn {
      width: 200px;
      height: 30px;
      font-size: 15px;
      color: #a7a7a7;
      border-radius: 11px;
      border: solid 1px #eeeeee;
    }
  }
}
</style>
